import React, {Component} from "react";
import {Button, Form, Input, message} from "antd";
import LockOutlined from "@ant-design/icons/lib/icons/LockOutlined";
import {request} from "../.umi/plugin-request/request";
import MailOutlined from "@ant-design/icons/lib/icons/MailOutlined";
import {server_api} from "../util/global_config";
import {history} from "umi"

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
export default class Register extends Component {

    state = {
        loading: false,
        time: 0,
        email: ''
    };

    handleSubmit = values => {
        request(`${server_api}/user/register`, {
            method: 'POST',
            data: values
        }).then(response => {
            if (!response) {
                message.error("验证码错误");
            } else {
                message.success("注册成功");
                history.push('/login');
            }
        })
    };

    getValidCode = () => {
        const {email} = this.state;
        if (!email || email === '') {
            message.error("Please input your email!");
            return;
        }
        this.setState({loading: true, time: 60});
        setInterval(() => {
            const {time: oldTime} = this.state;
            if (oldTime > 1) {
                this.setState({
                    time: oldTime - 1
                });
            } else {
                this.setState({
                    loading: false,
                    time: 0,
                });
            }
        }, 1000);
        request(`${server_api}/code/${email}`).then(response => {
            console.log(response);
        })
    };

    emailChange = (e) => {
        this.setState({email: e.target.value})
    };

    render() {
        const {loading = false, time = 0} = this.state;
        const addAfter = (<Button style={{width: 85}} type={'primary'} onClick={this.getValidCode}
                                  loading={loading}>{time > 0 ? time : '获取验证码'}</Button>);
        return (
            <div>
                <div style={{marginTop: 210}}>
                </div>
                <div align="center">
                    <Form {...layout}
                          onFinish={this.handleSubmit} name={'login'}
                          style={{maxWidth: 300}}>
                        <Form.Item label={'Email'}
                                   name={'email'}
                                   rules={[{required: true, message: 'Please input your email!'}]}>
                            <Input onChange={this.emailChange}
                                   prefix={<MailOutlined/>}
                                   placeholder="Email"
                            />
                        </Form.Item>
                        <Form.Item label={'Password'} name={'password'}
                                   rules={[{required: true, message: 'Please input your password!'}]}>
                            <Input.Password
                                prefix={<LockOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item label={'ValidCode'} name={'code'}
                                   rules={[{required: true, message: 'Please input your code!'}]}>
                            <Input placeholder="valid code" addonAfter={addAfter}/>
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" style={{width: '100%'}}>
                                Register
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}
